<template>
	<div>
		<el-row>
			<!-- 步骤条 -->
			<el-col :span="24">
				<el-steps :active="step" finish-status="success" align-center style="width:90%;margin:20px auto">
					<el-step title="选择分类"></el-step>
					<el-step title="选择商品"></el-step>
					<el-step title="确定信息"></el-step>
					<el-step title="添加完成"></el-step>
				</el-steps>
			</el-col>
			<!-- 第一步 选择分类 -->
			<el-col :span="24" v-show="step==0">
				<el-card class="box-card" style="width:85%;margin:20px auto">
						<el-cascader-panel
							:options="categoryOptions"
							:props="categorySetting"
							v-model="categoryCode"
						>
						</el-cascader-panel>
					
					<el-divider></el-divider>
					<div align="center">
						<el-button type="success" @click="checkGoods" >下一步：选择商品</el-button>
					</div>
				</el-card>
			</el-col>
			<!-- 第二部选择商品 -->
			<el-col :span="24" v-show="step==1">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<!-- 列表 -->
					<!-- 列表 -->
					<el-table :data="goodsList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column label="sku名称" prop="skuName" align="center" ></el-table-column>
						<el-table-column label="商品价格" prop="goodsPrice" align="center" ></el-table-column>
						<el-table-column label="商品主图" prop="masterImage" align="center" >
							<template slot-scope="scope">
								<img :src="scope.row.masterImage" width="40" height="40" />
							</template>
						</el-table-column>
						<el-table-column label="品牌名称" prop="brandName" align="center" ></el-table-column>
						<el-table-column label="商品规格" prop="goodsSpec" align="center"></el-table-column>
					</el-table>
					<el-divider></el-divider>
					<div align="center">
						<el-button type="primary" @click="step = 0">上一步</el-button>
						<el-button type="success" @click="confirmGoods" >下一步：确定信息</el-button>
					</div>
				</el-card>
			</el-col>
			<!-- 第三部确定商品 -->
			<el-col :span="24" v-show="step==2">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<!-- 列表 -->
					<!-- 列表 -->
					<el-table ref="dataForm" :data="dataForm.prefectureGoodsList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
						<el-table-column label="商品名称" prop="goodsName" align="center" ></el-table-column>
						<el-table-column label="商品价格" prop="goodsPrice" align="center" ></el-table-column>
						<el-table-column label="商品主图" prop="masterImage" align="center" >
							<template slot-scope="scope">
								<img :src="scope.row.masterImage" width="40" height="40" />
							</template>
						</el-table-column>
						<el-table-column label="商品排序" prop="goodsSort" align="center" >
							<template slot-scope="scope">
								<el-input v-model="scope.row.goodsSort"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="推荐状态" prop="goodsStatus" align="center">
							<template slot-scope="scope">
								<el-select v-model="scope.row.goodsStatus" class="input-width" placeholder="全部" >
									<el-option v-for="item in goodsStatusOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="推荐类型" prop="isMeddle" align="center">
							<template slot-scope="scope">
								<el-select v-model="scope.row.isMeddle" class="input-width" placeholder="全部" >
									<el-option v-for="item in isMeddleOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						
					</el-table>
					<el-divider></el-divider>
					<div align="center">
						<el-button type="primary" @click="step = 1">上一步</el-button>
						<el-button type="success" @click="submitGoods('dataForm')" >下一步：保存</el-button>
					</div>
				</el-card>
			</el-col>
			<el-col :span="24" v-show="step==3">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<result :isSuccess="true" :title="title">
						<template slot="action">
							<el-button type="primary" @click="back">返回列表</el-button>
						</template>
					</result>
				</el-card>
			</el-col>
		</el-row>
		
	</div>
</template>

<script>
import { findCategoryTree } from '@/api/mall/goodsCategory'
import { addPrefectureGoods ,findGoodsSkuAll} from '@/api/activity/prefecture'
import Result from '@/components/result/result'
export default{
	data(){
		return{
			step: 0,
			categoryCode:null,
			categoryOptions:[],
			categorySetting: {
				value: "code",
				label: "categoryName",
				children: "children",
				emitPath: false
			},
			goodsList:[],
			checkGoodsList:[],
			loading:false,
			searchForm:{
				prefectureCode:'',
				categoryCode: '',
			},
			title:'添加成功',
			dataForm:{
				prefectureCode:'',
				prefectureGoodsList:[]
			},
			isMeddleOptions: [
				{
					label: '系统默认',
					value: 1
				},
				{
					label: '运营干预',
					value: 2
				},
			],
			goodsStatusOptions: [
				{
					label: '推荐中',
					value: 1
				},
				{
					label: '撤销推荐',
					value: 2
				},
			],
			
			
			
		}
	},
	created() {
		this.dataForm.prefectureCode = this.$route.query.prefectureCode
		this.searchForm.prefectureCode = this.$route.query.prefectureCode
		this.initCategoryTree()
	},
	components:{
		Result
	},
	methods:{
		//初始化商品分类树
		initCategoryTree(){
			findCategoryTree().then(res =>{
				this.categoryOptions = this.getTreeData(res.data.responseData)
			})
		},
		getTreeData(data){
			for(var i=0;i<data.length;i++){
				if(data[i].children.length<1){
					data[i].children=undefined;
				}else {
					this.getTreeData(data[i].children);
				}
			}
			return data;
		},
		handleSelectionChange(val) {
			this.checkGoodsList = val;
		},
		checkGoods(){
			if(this.categoryCode != null ){
				this.step = 1;
				this.showGoods(this.categoryCode);
			}else{
				this.$message.error("请选择类目")
			}
		},
		showGoods(val){
			this.loading = true
			this.searchForm.categoryCode = val
			findGoodsSkuAll(this.searchForm).then(res =>{
				this.goodsList = res.data.responseData
			})
			this.loading =false
		},
		//确定商品信息
		confirmGoods(){
			if(this.checkGoodsList.length > 0){
				let prefectureGoodsList = []
				this.checkGoodsList.forEach(item =>{
					let oldPrefectureGoodsList = this.hasPrefectureGoodsList(this.dataForm.prefectureGoodsList, item);
					if(oldPrefectureGoodsList == null){
						prefectureGoodsList.push({
							goodsName: item.skuName,
							goodsSkuCode: item.skuCode,
							goodsSort:0,
							isMeddle:2,
							goodsStatus:1,
							masterImage:item.masterImage,
							goodsPrice:item.goodsPrice
						})
					}else{
						prefectureGoodsList.push(oldPrefectureGoodsList)
					}
					
				})
				console.log(prefectureGoodsList)
				this.dataForm.prefectureGoodsList = prefectureGoodsList
				this.step = 2;
			}
		},
		submitGoods(){
			this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				console.log(this.dataForm)
				addPrefectureGoods(this.dataForm).then(res =>{
					if(res.data.responseCode == '200'){
						this.step = 3;
					}
				}).catch(err =>{
					this.$message.error(err.data.responseMessage)
				})
			}).catch(e => {
				console.log(e);
				this.$message({
					type: "info",
					message: "已取消"
				});
			});
		},
		hasPrefectureGoodsList(prefectureGoodsList,item){
			console.log('item',item)
			console.log('prefectureGoodsList',prefectureGoodsList)
			let oldPrefectureGoodsList = null
			if(prefectureGoodsList.length > 0 ){
				for(let i = 0 ; i < prefectureGoodsList.length ; i++){
					if(prefectureGoodsList[i].goodsSkuCode == item.skuCode){
						oldPrefectureGoodsList = prefectureGoodsList[i]
					}
				}
			}
			return oldPrefectureGoodsList
		},
		back(){
			this.$router.go(-1)
		}
		
	}
}	
</script>

<style>
.el-cascader-menu__wrap{
	min-height: 400px;
	width: 400px;
}
</style>
